<template>
	<view class="sheet-add">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 sheet-add-wrap">
			<view class=" pl-3 pr-3 mb-3 sheet-add-panel">
				<u--form class="sheet-add-form" labelWidth="70" :borderBottom="false">
					<u-form-item label="商品图片" prop="" :borderBottom="false">
						<image class="img" :src="'http://img.help10000.com' + prodItem.Image" mode="scaleToFill">
					</u-form-item>
					<u-form-item label="商品名称" prop="" :borderBottom="false">
						<view class="">{{ prodItem.ItemName }}</view>
					</u-form-item>
					<u-form-item label="商品型号" prop="" :borderBottom="false">
						<view class="">{{ prodItem.ItemStyle }}</view>
					</u-form-item>
					<u-form-item label="单位" prop="" :borderBottom="false">
						<view class="">{{ prodItem.Unit }}</view>
					</u-form-item>
				</u--form>
			</view>
			<view class="pl-2 mb-1 main-title">请输入数量和单价</view>
			<view class="pl-3 pr-3 pb-1 mb-8 sheet-add-panel">
				<u--form class="sheet-add-form" labelWidth="70" :borderBottom="false" :model="sheetForm" :rules="sheetRules"
					ref="sheetFormRef">

					<u-form-item label="数量" prop="SaleQty" :borderBottom="true" >
						<u--input v-model="sheetForm.SaleQty" placeholder="请输入商品数量" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item label="单价(元)" prop="SalePrice" :borderBottom="false">
						<u--input v-model="sheetForm.SalePrice" placeholder="请输入商品单价" border="none" clearable></u--input>
					</u-form-item>
				</u--form>
			</view>
			<u-button @click="handleAdd" color="#007aff" shape="circle" text="保存"></u-button>
			<view class="mb-3"></view>
			<u-button @click="handleBack" :plain="true" color="#007aff" shape="circle" text="放弃"></u-button>

		</view>

	</view>
</template>

<script>
import {
	sheetProdAdd
} from "@/apis/workOrder.js";
export default {
	data() {
		return {
			prodItem: {},
			inputStyle: {
				background: '#f1f1f1',
				padding: '6px 8px'
			},
			sheetForm: {
				SaleQty: 1,
				SalePrice: 0,
			},
			sheetRules: {
				SaleQty: {
					required: true,
					message: '请输入商品数量',
				},
				SalePrice: {
					required: true,
					message: '请输入商品单价',
				},
			},
		};
	},
	onLoad(option) {
		if (option.item) {
			this.prodItem = JSON.parse(option.item)
			console.log('option', option.item)
		} else {
			this.$navigateBack(this.$router, 1)
		}
	},
	methods: {
		async handleAdd() {
			if (!await this.$refs.sheetFormRef.validate()) return;
			const data = {
				...this.sheetForm,
				...this.prodItem
			}
			console.log('handleAdd sheetForm', data)

			const res = await sheetProdAdd(data)
			console.log('handleAdd res', res)

			if (res.MsgCode != 0) return
			uni.showToast({
				title: '增加成功',
				icon: "none",
				mask: true,
				position: "center",
			});
			uni.removeStorageSync('CurrentWareId')
			uni.removeStorageSync('CurrentWareName')
			setTimeout(() => {
				this.$navigateBack(this.$router, 2)
			}, 1000)
		},
		handleBack() {
			this.$navigateBack(this.$router, 1)
		}
	}
}
</script>

<style lang="scss">
.sheet-add {
	.top-bg {
		width: 100%;
		height: 120rpx;
		background-color: $s-text-color-brand;
		z-index: -1;
	}

	.sheet-add-wrap {
		margin-top: -72rpx;

		.main-title {
			font-weight: bold;
			color: $s-text-color-brand;
			font-size: 28rpx;
		}

		.sheet-add-panel {
			background-color: #fff;
			border-radius: $s-border-radius;
			box-shadow: $s-bg-shadow;

			.sheet-add-form {}

			.img {
				width: 140rpx;
				height: 140rpx;

			}
		}
	}
}
</style>
